<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${article != null ? article.title : '文章详情'}">文章详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css"/>
    <style>
        body{font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;}
        .container{max-width: 860px;margin: 0 auto;padding: 16px;}
        .title{font-size:24px;font-weight:700;margin-bottom:10px}
        .meta{font-size:12px;color:#6b7280;margin-bottom:10px}
        .content{line-height:1.7}
    </style>
</head>
<body>
<div class="container" th:if="${article != null}">
    <div class="title" th:text="${article.title}">标题</div>
    <div class="meta">
        分类ID: <span th:text="${article.categoryId}">0</span>
        · 作者ID: <span th:text="${article.authorId}">0</span>
        · 标签: <span th:text="${article.tags}">无</span>
    </div>
    <div class="content" th:utext="${article.content}">内容</div>
</div>
<div class="container" th:if="${article == null}">
    <p>文章不存在或已删除。</p>
    <a th:href="@{'/articles'}">返回列表</a>
    </div>
</body>
</html>